<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜谱管理系统</title>
    <style>
        :root {
            --primary-color: #3b82f6;
            --background-color: #f3f4f6;
            --text-color: #1f2937;
            --border-color: #e5e7eb;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.5;
            color: var(--text-color);
            background-color: var(--background-color);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        header {
            background-color: #ffffff;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
            padding: 1rem 0;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
        }

        nav ul {
            display: flex;
            list-style: none;
            gap: 1.5rem;
        }

        nav ul li a {
            text-decoration: none;
            color: var(--text-color);
            font-weight: 500;
        }

        nav ul li a.active {
            color: var(--primary-color);
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .search-container {
            position: relative;
        }

        #header-search {
            padding: 0.5rem 1rem 0.5rem 2.5rem;
            border: 1px solid var(--border-color);
            border-radius: 0.375rem;
            width: 250px;
        }

        #header-search-btn {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
        }

        .publish-btn {
            padding: 0.5rem 1rem;
            background-color: var(--primary-color);
            color: #ffffff;
            border: none;
            border-radius: 0.375rem;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .publish-btn:hover {
            background-color: #2563eb;
        }

        .user-icon {
            position: relative;
        }

        .user-icon-img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
        }

        .Loginlist {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            background-color: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 0.375rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            z-index: 10;
        }

        .Loginlist.active {
            display: block;
        }

        .Loginlist li {
            list-style: none;
        }

        .Loginlist li a {
            display: flex;
            align-items: center;
            padding: 0.5rem 1rem;
            text-decoration: none;
            color: var(--text-color);
        }

        .Loginlist li a:hover {
            background-color: var(--background-color);
        }

        .Loginlist-ico {
            width: 16px;
            height: 16px;
            margin-right: 0.5rem;
        }

        main {
            padding: 2rem 0;
        }

        .content {
            display: flex;
            gap: 2rem;
        }

        .filters {
            width: 250px;
            background-color: #ffffff;
            border-radius: 0.5rem;
            padding: 1.5rem;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        }

        .filter-section {
            margin-bottom: 1.5rem;
        }

        .filter-section h2 {
            font-size: 1rem;
            margin-bottom: 0.75rem;
        }

        .filter-options label {
            display: block;
            margin-bottom: 0.5rem;
        }

        .recipes {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1.5rem;
        }

        .recipe-card {
            background-color: #ffffff;
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
            transition: box-shadow 0.3s;
        }

        .recipe-card:hover {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .recipe-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .recipe-card-content {
            padding: 1rem;
        }

        .recipe-card h3 {
            margin-bottom: 0.5rem;
        }

        .recipe-card-meta {
            display: flex;
            justify-content: space-between;
            font-size: 0.875rem;
            color: #6b7280;
        }

        @media (max-width: 768px) {
            .content {
                flex-direction: column;
            }

            .filters {
                width: 100%;
            }

            .recipes {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            }
        }
    </style>
</head>
<body>
<header>
    <div class="container">
        <div class="header-content">
            <h1 class="logo">菜谱管理系统</h1>
            <nav>
                <ul>
                    <li><a href="#" class="active">首页</a></li>
                    <li><a href="#">菜谱分类</a></li>
                    <li><a href="#">最新菜谱</a></li>
                    <li><a href="#">热门菜谱</a></li>
                    <li><a href="#">我的收藏</a></li>
                </ul>
            </nav>
            <div class="header-actions">
                <div class="search-container">
                    <input type="text" id="header-search" placeholder="搜索菜谱...">
                    <button id="header-search-btn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="11" cy="11" r="8"></circle>
                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                        </svg>
                    </button>
                </div>
                <button class="publish-btn">发布菜谱</button>
                <div class="user-icon">
                    <img src="/placeholder.svg?height=40&width=40" alt="" class="user-icon-img">
                    <ul class="Loginlist">
                        <li>
                            <a href="#">
                                <img src="/placeholder.svg?height=16&width=16" alt="" class="Loginlist-ico">
                                进入主页
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="/placeholder.svg?height=16&width=16" alt="" class="Loginlist-ico">
                                退出登录
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</header>

<main>
    <div class="container">
        <div class="content">
            <aside class="filters">
                <div class="filter-section">
                    <h2>筛选条件</h2>
                    <div class="filter-options">
                        <h3>分类</h3>
                        <label>
                            <input type="radio" name="category" value="all" checked> 全部
                        </label>
                        <label>
                            <input type="radio" name="category" value="vegetable"> 素菜
                        </label>
                        <label>
                            <input type="radio" name="category" value="meat"> 荤菜
                        </label>
                        <label>
                            <input type="radio" name="category" value="soup"> 汤类
                        </label>
                    </div>
                    <div class="filter-options">
                        <h3>烹饪时间</h3>
                        <label>
                            <input type="radio" name="time" value="all" checked> 全部
                        </label>
                        <label>
                            <input type="radio" name="time" value="15"> 15分钟以内
                        </label>
                        <label>
                            <input type="radio" name="time" value="30"> 30分钟以内
                        </label>
                        <label>
                            <input type="radio" name="time" value="60"> 1小时以内
                        </label>
                    </div>
                    <div class="filter-options">
                        <h3>难度等级</h3>
                        <label>
                            <input type="radio" name="difficulty" value="all" checked> 全部
                        </label>
                        <label>
                            <input type="radio" name="difficulty" value="easy"> 简单
                        </label>
                        <label>
                            <input type="radio" name="difficulty" value="medium"> 中等
                        </label>
                        <label>
                            <input type="radio" name="difficulty" value="hard"> 困难
                        </label>
                    </div>
                </div>
            </aside>
            <section class="recipes">
                <!-- Recipe cards will be dynamically inserted here -->
            </section>
        </div>
    </div>
</main>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const recipes = [
            {
                id: 1,
                title: "红烧茄子",
                category: "素菜",
                time: "30分钟",
                difficulty: "简单",
                image: "/placeholder.svg?height=200&width=300"
            },
            {
                id: 2,
                title: "清炒青菜",
                category: "素菜",
                time: "15分钟",
                difficulty: "简单",
                image: "/placeholder.svg?height=200&width=300"
            },
            {
                id: 3,
                title: "红烧肉",
                category: "荤菜",
                time: "60分钟",
                difficulty: "中等",
                image: "/placeholder.svg?height=200&width=300"
            },
            {
                id: 4,
                title: "番茄蛋汤",
                category: "汤类",
                time: "20分钟",
                difficulty: "简单",
                image: "/placeholder.svg?height=200&width=300"
            },
            {
                id: 5,
                title: "麻婆豆腐",
                category: "荤菜",
                time: "25分钟",
                difficulty: "中等",
                image: "/placeholder.svg?height=200&width=300"
            },
            {
                id: 6,
                title: "糖醋里脊",
                category: "荤菜",
                time: "40分钟",
                difficulty: "中等",
                image: "/placeholder.svg?height=200&width=300"
            }
        ];

        const recipesContainer = document.querySelector('.recipes');
        const categoryFilters = document.querySelectorAll('input[name="category"]');
        const timeFilters = document.querySelectorAll('input[name="time"]');
        const difficultyFilters = document.querySelectorAll('input[name="difficulty"]');
        const searchInput = document.getElementById('header-search');
        const userIcon = document.querySelector('.user-icon-img');
        const loginList = document.querySelector('.Loginlist');

        function renderRecipes(filteredRecipes) {
            recipesContainer.innerHTML = '';
            filteredRecipes.forEach(recipe => {
                const recipeCard = document.createElement('div');
                recipeCard.className = 'recipe-card';
                recipeCard.innerHTML = `
                        <img src="${recipe.image}" alt="${recipe.title}" onerror="this.style.display='none'">
                        <div class="recipe-card-content">
                            <h3>${recipe.title}</h3>
                            <div class="recipe-card-meta">
                                <span>${recipe.category}</span>
                                <span>${recipe.time}</span>
                                <span>${recipe.difficulty}</span>
                            </div>
                        </div>
                    `;
                recipesContainer.appendChild(recipeCard);
            });
        }

        function filterRecipes() {
            const categoryValue = document.querySelector('input[name="category"]:checked').value;
            const timeValue = document.querySelector('input[name="time"]:checked').value;
            const difficultyValue = document.querySelector('input[name="difficulty"]:checked').value;
            const searchValue = searchInput.value.toLowerCase();

            const filteredRecipes = recipes.filter(recipe => {
                const matchesCategory = categoryValue === 'all' || recipe.category === categoryValue;
                const matchesTime = timeValue === 'all' || parseInt(recipe.time) <= parseInt(timeValue);
                const matchesDifficulty = difficultyValue === 'all' || recipe.difficulty === difficultyValue;
                const matchesSearch = recipe.title.toLowerCase().includes(searchValue) ||
                    recipe.category.toLowerCase().includes(searchValue);

                return matchesCategory && matchesTime && matchesDifficulty && matchesSearch;
            });

            renderRecipes(filteredRecipes);
        }

        categoryFilters.forEach(filter => filter.addEventListener('change', filterRecipes));
        timeFilters.forEach(filter => filter.addEventListener('change', filterRecipes));
        difficultyFilters.forEach(filter => filter.addEventListener('change', filterRecipes));
        searchInput.addEventListener('input', filterRecipes);

        userIcon.addEventListener('click', () => {
            loginList.classList.toggle('active');
        });

        // Close login list when clicking outside
        document.addEventListener('click', (event) => {
            if (!userIcon.contains(event.target) && !loginList.contains(event.target)) {
                loginList.classList.remove('active');
            }
        });

        // Initial render
        renderRecipes(recipes);
    });
</script>
</body>
</html>